<template>
  <div id="Alphabet">
    <li class="item" v-for="item,key of cities" :key="key" @click="handleLetterClick">{{key}}</li>
  </div>
</template>

<script>
export default {
  name: 'Alphabet',
  props:{
  	cities:Object
  },
  methods:{
  	handleLetterClick(e){
  		this.$emit('change',e.target.innerText)
  	}
  }
}
</script>

<style scoped>
li{
	list-style: none;
}
#Alphabet{
	display: flex;
	flex-flow: column wrap;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 1.58rem;
	right: 0;
	bottom: 0;
	width: .4rem;
}
.item{
	line-height: .4rem;
	text-align: center;
	color: #00bcd4;
}
</style>